<style>
    :root {
        /**
   * Palette
   * Gruvbox dark, medium
   * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
   */
        --base00: #ffffff;
        /* ---- */
        --base01: #4c3f32;
        /* --- */
        --base02: #504945;
        /* -- */
        --base03: #665c54;
        /* - */
        --base04: #406ABA;
        /* + */
        --base05: #e1e17c;
        /* ++ */
        --base06: #ebdbb2;
        /* +++ */
        --base07: #fbf1c7;
        /* ++++ */
        --base08: #fb4934;
        /* red */
        --base09: #fe8019;
        /* orange */
        --base0A: #fabd2f;
        /* yellow */
        --base0B: #b8bb26;
        /* green */
        --base0C: #8ec07c;
        /* aqua/cyan */
        --base0D: #83a598;
        /* blue */
        --base0E: #d3869b;
        /* purple */
        --base0F: #d65d0e;
        /* brown */

        /**
   * Typograph
   */
        --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
            "Helvetica Neue", sans-serif;
        --font-size-scaler: 62.5%;
        /* 1rem = 10px */
        --font-size-m: 1.4rem;
        --font-size-s: 2.2rem;

        /**
   * Components
   */
        --body-color: var(--base04);
        --body-bg: var(--base00);

        --daily-heading-color: var(--base04);

        --source-name-color: var(--base0A);
        --source-name-hover-color: var(--base0A);

        --article-title-color: var(--base05);
        --article-title-hover-color: var(--base07);
        --article-summary-color: var(--base06);
        --article-summary-hover-color: var(--base07);

        --accordion-content-rail-color: var(--base03);
        --accordion-content-hover-rail-color: var(--base04);
        --accordion-title-marker-color: var(--base03);
        --accordion-title-hover-marker-color: var(--base04);

        --card-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
        --card-bg: var(--base01);
        --card-radius: 4px;

        --footer-color: var(--base04);
        --footer-link-hover-color: var(--base07);
    }

    /**
 * Internals below
 *
 * If you can't create a specific look and feel with the configuration above,
 * you might have reached the customization limit of the template.
 *
 * Options:
 * 1. File an issue with the template.
 * 2. Target specific elements and write your own CSS. A future change in HTML may break your style.
 * 3. (Coming soon...) Write your own template with Template Extensibility API.
 */
    html {
        font-size: var(--font-size-scaler);
    }

    body {
        background-color: var(--body-bg);
        font-family: var(--font-family-default);
        color: var(--body-color);
        margin: 0;
        gap: 24px;
        padding: 16px;
        display: grid;
    }

    :not(:focus-visible) {
        outline: none;
    }

    .card {
        border-radius: var(--card-radius);
        box-shadow: var(--card-shadow);
        background: var(--card-bg);
    }

    .sources {
        padding: 40px 16px;
        list-style: none;
        margin: 0;
        display: grid;
        gap: 16px;
    }

    .daily-heading {
        font-size: var(--font-size-s);
        font-weight: 600;
        margin: 0 0 8px 0;
        padding-left: 16px;
        color: var(--daily-heading-color);
    }

    .source {
        display: grid;
        gap: 4px;
        padding: 20px 10px;
        border-bottom: 2px solid #d9f5ce;
    }

    .source-name {
        font-size: var(--font-size-s);
        font-weight: 400;
        margin: 0;
    }

    .source-name__link {
        color: var(--source-name-color);
        text-decoration: none;
    }

    .source-name__link:hover {
        color: var(--source-name-hover-color);
        text-decoration: underline;
    }

    .article-expander {
        padding: 2px 4px;
        border-radius: 4px;
    }

    .article-expander__title {
        color: var(--article-title-color);
        font-size: var(--font-size-m);
        font-weight: 600;
    }

    .article-expander__title:hover {
        cursor: pointer;
        color: var(--article-title-hover-color);
    }

    .article-expander__title::marker {
        color: var(--accordion-title-marker-color);
    }

    .article-expander__title:hover::marker {
        color: var(--accordion-title-hover-marker-color);
    }

    .article-summary-link {
        color: var(--article-summary-color);
        font-size: var(--font-size-m);
        text-decoration: none;
    }

    .article-summary-link:hover {
        color: var(--article-summary-hover-color);
        --accordion-content-rail-color: var(--accordion-content-hover-rail-color);
    }

    .article-summary-box-outer {
        display: block;
        padding: 4px 8px 8px 4px;
    }

    .article-summary-box-inner {
        padding-left: 8px;
        border-left: 1px solid var(--accordion-content-rail-color);
    }

    .article-reading-time {
        font-weight: 600;
    }

    footer {
        color: var(--footer-color);
        font-size: var(--font-size-s);
        display: flex;
        padding: 0 16px;
        justify-content: space-between;
    }

    .footer-link {
        color: var(--footer-link-text);
        text-decoration: none;
    }

    .footer-link:hover {
        color: var(--footer-link-hover-color);
        text-decoration: underline;
    }
</style>